<template>
	<div class="system-menu-container" v-el-draggable-dialog>
		<el-dialog :title="option.title" v-model="isShowDialog" width="769px">
			<div class="system-menu-form">
				<el-form ref="form" :model="contentInfo" :rules="formData.rules" label-width="80px">
					<el-form-item ref="goodsId" label="选择商品" prop="goodsId">
						<el-select v-model="contentInfo.goodsId" placeholder="请选择" style="width: 100%;">
							<el-option v-for="item in goodList" :key="item.goodsId" :label="item.goodsName" :value="item.goodsId"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item ref="rulesId" label="拼团规则" prop="rulesId">
						<el-select v-model="contentInfo.rulesId" placeholder="请选择" style="width: 100%;">
							<el-option v-for="item in ruleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item ref="startTime" label="开团时间" prop="startTime">
						<el-date-picker v-model="contentInfo.startTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" @change="changeTime(contentInfo,'startTime',$event)"></el-date-picker>
					</el-form-item>
					<el-form-item ref="endTime" label="结束时间" prop="endTime">
						<el-date-picker v-model="contentInfo.endTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" @change="changeTime(contentInfo,'endTime',$event)"></el-date-picker>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog">取 消</el-button>
					<el-button :loading="formData.loading" type="primary" @click="onSubmit">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'
import { verifiyNumberInteger } from '/@/utils/toolsValidate'
import scrollForm from '/@/utils/scrollForm'
import { ElMessage } from 'element-plus'
import { formatDate } from '/@/utils/formatTime'
import { getGoodsSellingRulesList, getGoodsList, addGoodsSelling, updateGoodsSelling } from '/@/api/group'
import { getGoodsList } from '/@/api/good'

export default {
	name: 'operationGroupList',
	props: {
		contentInfo: {
			type: Object,
			default: () => ({})
		},
		option: {
			type: Object,
			default: () => ({ type: 'add', title: '新增' })
		}
	},
	setup(props, { emit }) {
		const refs = reactive({
			form: null,
			goodsId: null, //商品id
			rulesId: null, //规则id
			startTime: null, //开团时间
			endTime: null //结束时间
		})

		const state = reactive({
			isShowDialog: false,
			formData: {
				loading: false,
				rules: {
					goodsId: [{ required: true, message: '请选择商品', trigger: ['blur', 'change'] }],
					rulesId: [{ required: true, message: '请选择拼团规则', trigger: ['blur', 'change'] }],
					startTime: [{ required: true, message: '请选择开团时间', trigger: ['blur', 'change'] }],
					endTime: [{ required: true, message: '请选择结束时间', trigger: ['blur', 'change'] }]
				}
			},
			ruleList: [],
			goodList: []
		})

		// 正整数
		const filterNum = (row, field, val: string) => {
			row[field] = verifiyNumberInteger(val)
		}
		
		const changeTime = (row, field, val: string) => {
			row[field] = formatDate(new Date(val), 'YYYY-mm-dd HH:MM:SS')
		}

		const getRuleList = () => {
			const params = {
				pageNum: 1,
				pageSize: 10
			}

			getGoodsSellingRulesList(params).then(res => {
				const { datas } = res

				state.ruleList = datas.list
			})
		}

		const getGoodList = () => {
			const params = {
				pageNum: 1,
				pageSize: 10
			}

			getGoodsList(params).then(res => {
				const { datas } = res

				state.goodList = datas.list
			})
		}

		// 打开弹窗
		const openDialog = (row: any) => {
			state.isShowDialog = true
			getRuleList()
			getGoodList()
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false
		}

		// 新增
		const onSubmit = () => {
			refs.form.validate(async (valid: boolean, object: object) => {
				if (valid) {
					state.formData.loading = true

					if (props.option.type === 'add') {
						await addGoodsSelling(props.contentInfo).finally(() => {
							state.formData.loading = false
						})
						ElMessage.success('新增成功')
					} else {
						await updateGoodsSelling(props.contentInfo).finally(() => {
							state.formData.loading = false
						})
						ElMessage.success('编辑成功')
					}

					emit('isOk')
					closeDialog() // 关闭弹窗
				} else {
					scrollForm(refs, object, true)
				}
			})
		}

		return {
			filterNum,
			changeTime,
			openDialog,
			closeDialog,
			onSubmit,
			...toRefs(refs),
			...toRefs(state)
		}
	}
}
</script>

<style scoped lang="scss">
.system-menu-container {
	.system-menu-form {
		max-height: 70vh !important;
		overflow-y: auto;
		overflow-x: hidden;
	}
}
</style>
